• resolves [FE] LongReviewItem의 구조를 수정해서 공통 서술형 문항 컴포넌트로 사용한다. #277

🚀 어떤 기능을 구현했나요 ?

• 기존의 LongReviewItem을 리팩토링해서 공통 서술형 문항 컴포넌트를 만들었습니다.

🔥 어떻게 해결했나요 ?

단순 Textarea 컴포넌트에서 서술형 문항 컴포넌트로의 변경

• 이전 컴포넌트는 Textarea 컴포넌트에 가까웠다면, 서술형 문항 하나를 관리하는 컴포넌트로 변경이 이루어졌어요. 질문 번호와 질문 내용을 함께 전달받을 수 있게 수정했습니다.

유효성 검사 로직과 외부 컴포넌트와의 연동 로직 분리

• 이전의 LongReviewItem의 문제점은 외부 컴포넌트에서 해당 컴포넌트를 사용할 때 textarea의 값을 사용하거나, 유효한지 여부를 알 수 없다는 것이었습니다.
• 커스텀 훅에서 서술형 문항의 value, isError, errorMessage를 상태로 갖습니다. 그리고 유효성 검사용 handler를 정의해서 값이 바뀔 때마다 업데이트하고 적절하게 에러 처리를 합니다.
• 이와 별개로 외부 컴포넌트에서 상태를 업데이트하고, 에러 여부를 사용할 수 있도록 handleTextareaChange와 handleErrorChange를 props로 받도록 했습니다. handleErrorChange는 에러 여부(isError)가 바뀔 때마다 그 값이 전달됩니다.

왜 훅으로 분리했는지?

• 최소/최대 글자수와 value를 인자로 받아서 에러 여부를 반환하는 로직을 유틸 함수로 분리하는 방법도 시도해 보았습니다. 하지만 에러 여부와 함께 에러 메시지도 변경되어야 한다는 점, 최대 글자수 이상이 되면 입력을 막아야 한다는 점 등의 이유로 단순 유틸 함수로 분리하기는 어렵다고 판단했습니다.

📝 어떤 부분에 집중해서 리뷰해야 할까요?

📚 참고 자료, 할 말

• 아직 리뷰 작성 폼이 완전하게 구현되지 않은 상태라 지금의 방식이 적절할지 여부는 좀 더 지켜봐야 할 것 같아요. 코드를 합치는 과정에서 사용하기에 불편한 부분이 있다면 좀 더 다듬으면 좋을 것 같아요. 우선은 textarea의 상태를 밖에서도 사용할 수 있도록 만드는 것을 목표로 구현했습니다.

사용 예시

{dataToWrite.questions.map((question, index) => {
  return (
    <LongReviewItem
      key={index}
      question={{ order: index + 1, content: question.content }}
      answer={{
        minLength: 20,
        maxLength: 1000,
        handleTextareaChange: (e) => handleAnswerChange(question.id, e.target.value),
        handleErrorChange: (isError) => {
          console.log(isError);
        },
      }}
    />
  );
})}